<template>
    <a href="./instructor-inner.html">
        <div class="border-b-4 border-gray-800 max-w-sm mr-5 mb-6">
            <div class="h-32 w-full">
                <img class="w-full h-full object-cover object-center -t" src="./assets/images/instructor-2.png"
                     alt="thumbnail" />
            </div>
            <div class="shadow p-4">
                <div class="flex items-center justify-between mb-1">
                    <h5 class="font-medium text-gray-800">Chan Doe</h5>
                    <div class="flex items-center">
                        <svg class="w-3 mr-1 text-yellow-400 icon icon-tabler icon-tabler-star"
                             xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" fill="none" d="M0 0h24v24H0z"></path>
                            <path fill="currentColor"
                                  d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z">
                            </path>
                        </svg>
                        <svg class="w-3 mr-1 text-yellow-400 icon icon-tabler icon-tabler-star"
                             xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" fill="none" d="M0 0h24v24H0z"></path>
                            <path fill="currentColor"
                                  d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z">
                            </path>
                        </svg>
                        <svg class="w-3 mr-1 text-yellow-400 icon icon-tabler icon-tabler-star"
                             xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" fill="none" d="M0 0h24v24H0z"></path>
                            <path fill="currentColor"
                                  d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z">
                            </path>
                        </svg>
                        <svg class="w-3 mr-1 text-yellow-400 icon icon-tabler icon-tabler-star"
                             xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" fill="none" d="M0 0h24v24H0z"></path>
                            <path fill="currentColor"
                                  d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z">
                            </path>
                        </svg>
                        <svg class="w-3 text-gray-200 icon icon-tabler icon-tabler-star" xmlns="http://www.w3.org/2000/svg"
                             width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                             stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" fill="none" d="M0 0h24v24H0z"></path>
                            <path fill="currentColor"
                                  d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z">
                            </path>
                        </svg>
                    </div>
                </div>
                <p class="text-xs text-gray-600 font-medium mb-2">
                    Venture Capitalist
                </p>
                <p class="text-xs text-gray-600 mb-4">
                    Et quidem faciunt, ut de voluptate ponit, quod summum bonum
                    sit aut rerum et quidem…
                </p>
                <div class="flex justify-between items-center text-xs mb-5">
                    <p class="py-1 px-2 text-gray-600 bg-gray-100 rounded">
                        Investment
                    </p>
                    <p class="py-1 px-2 text-gray-600 bg-gray-100 rounded mx-2">
                        Marketing
                    </p>
                    <p class="py-1 px-2 text-gray-600 bg-gray-100 rounded">
                        Budget
                    </p>
                </div>
                <div
                        class="flex flex-col lg:flex-row w-full items-start lg:items-center mb-8 lg:mb-0 lg:justify-between">
                    <div class="flex lg:block flex-row-reverse items-center mb-4 lg:mb-0">
                        <h3 class="text-gray-800 leading-6 text-sm">Courses</h3>
                        <h2 class="mr-2 lg:mr-0 text-gray-600 text-xl lg:text-lg font-bold">
                            23
                        </h2>
                    </div>
                    <div class="flex lg:block flex-row-reverse items-center mb-4 lg:mb-0">
                        <h3 class="text-gray-800 leading-6 text-sm">Hours</h3>

                        <h2 class="mr-2 lg:mr-0 text-gray-600 text-xl lg:text-lg font-bold">
                            2400
                        </h2>
                    </div>
                    <div class="flex lg:block flex-row-reverse items-center">
                        <h3 class="text-gray-800 leading-6 text-sm">Students</h3>

                        <h2 class="mr-2 lg:mr-0 text-gray-600 text-xl lg:text-lg font-bold">
                            104
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </a>
</template>

<script>
    export default {
        name: "teacher-card"
    }
</script>

<style scoped>

</style>
